<template>
  <div class="account">
    <NavBar></NavBar>
    <div class="accountBody">
      <div class="accountItem" v-for="(item,index) in accountList" :key="index" @click="linkTo(item.path)">
        <van-icon :class-prefix="item.icon" size="25" color="#FF5E00" />
        <span class="title">{{item.name}}</span>
      </div>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { NavBar, TabBar } from "../../components";
const accountList = [
  {
    icon: 'iconfont icon-user',
    name: 'Profile',
    path: 'Profile',
  },
  {
    icon: 'iconfont icon-order',
    name: 'Order',
    path: 'Order',
  },
  {
    icon: 'iconfont icon-address',
    name: 'Address',
    path: 'Address',
  },
  {
    icon: 'iconfont icon-payment',
    name: 'PayMent',
    path: 'PayMent',
  },
]
const router = useRouter();
const linkTo = (path: string) => {
  router.push({name: path})
}
</script>
<style scoped>
.accountBody {
  padding: 0 20px;
  margin-top: 20px;
}
.accountItem {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: bold;
  color: #6D3805;
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.accountItem .icon {
  color:#FF5E00;
}
.accountItem .title {
  font-size: 18px;
  margin-left: 15px;
}
</style>